// function qs(ele) {
//     return document.querySelector(ele)
// }

// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426


const qs = (element) => document.querySelector(element)



axios.defaults.baseURL = 'http://124.223.14.236:3001/api'


async function init(){
    //  获取省数据
     const {data: res} = await axios.get('/city/province')
     console.log(res);
       const  provinceStr =  res.data
            .map(item => `<option value="${item.province}">${item.name}</option>` )
             .join('')


             qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr
             qs('#province').value = 34



             // 获取市数据  
     const {
        data :{ data: cityData } 
        
        } = await axios.get('/city/city' , {
      params :{
        provinceCode : '34' ,
      }  
     })

     console.log(cityData);
  const cityStr =  cityData
     .map((item) => `<option value="${item.city}">${item.name}</option>`)
     .join('')

     qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
     qs('#city').value = '01'
    


      //    获取区数据
   const  {data : {data : countyData}} =    await axios.get('/city/area' ,{
            params :{
           provinceCode : '34' ,
           cityCode : '01'
            }
          })

          console.log(countyData);
       const countyStr =  countyData.map(item => `<option value="${item.area}">${item.name}</option>`)
                                      .join('')
         qs('#county').innerHTML = '<option value="">请选择区县</option>' +  countyStr
         qs('#county').value = '02'

}

init()





     qs('#province').addEventListener('change' , async function(){
        qs('#city').innerHTML = '<option value="">请选择城市</option>'
        qs('#county').innerHTML = '<option value="">请选择区县</option>'

        const {
            data :{ data: cityData } 
            
            } = await axios.get('/city/city' , {
          params :{
            provinceCode : this.value ,
          }  
         })
    
         console.log(cityData);
      const cityStr =  cityData
         .map((item) => `<option value="${item.city}">${item.name}</option>`)
         .join('')
    
         qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr

     })


     qs('#city').addEventListener('change' , async function(){
            console.log(this);
        const  {data : {data : countyData}} =    await axios.get('/city/area' ,{
            params :{
           provinceCode : qs('#province').value ,
           cityCode : this.value
            }
          })

          console.log(countyData);
       const countyStr =  countyData.map(item => `<option value="${item.area}">${item.name}</option>`)
                                      .join('')
         qs('#county').innerHTML = '<option value="">请选择区县</option>' +  countyStr

     })























